import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Counter from "./Counter";
import {connect} from "react-redux";
import {addTodoToPendding,penddingToFinished} from './redux/actions';

class App extends Component {
  render() {
    return (
      <div className="App">
        {/* <Counter/> */}
        <input type="text" ref="input"/>
        <button onClick={()=>{
         var value = this.refs.input.value;
         this.props.addTodo(value)
        }}>点击添加todo</button>
        <div>
          <div>正在进行</div>
          <div>
            {
              this.props.penddingTodos.map((ele,index)=>{
                return <div key={index}>
                  <input type="checkbox"  onClick={()=>{
                     this.props.finish(ele)
                  }}/>
                  <span>{ele.text}</span>
                </div>
              })
            }
          </div>
        </div>
        <div>
            <div>已完成</div>
            <div>
              {
                this.props.finishedTodos.map((ele,index)=>{
                  return <div key={index}>
                    <input type="checkbox" checked onClick={()=>{
                     
                    }}/>
                    <span>{ele.text}</span>
                  </div>
                })
              }
            </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(rootReducer){
  return{
    penddingTodos:rootReducer.todoReducer.penddingList,
    finishedTodos:rootReducer.todoReducer.finishedList
  }
}

function mapActionToProps(dispatch){
  return{
    addTodo:(value)=>{dispatch(addTodoToPendding(value))},
    finish:(todo)=>{dispatch(penddingToFinished(todo))}
  }
}


export default connect(mapStateToProps,mapActionToProps)(App);
